<template>
	<view>
		<view v-if="isShow">
			<custom-header title="卖卡" :isHaveBack="false"></custom-header>

			<!-- 内容 -->
			<view class="container">
				<view class="sidebar">
					<view v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)"
						:class="{ 'selected-tab': selectedIndex === index }" class="tab-item">
						<text>{{ tab.name }}</text>
					</view>
				</view>
				<view class="content">
					<scroll-view scroll-y enable-back-to-top style="height: 95%;">
						<view class="list">
							<view v-for="(item, index) in currentList" :key="index" class="list-item"
								@click="toSaleCard(item.id)">
								<image :src="item.mimg" class="item-image" mode="aspectFit"></image>
								<text class="item-text">{{ item.name }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<custom-tabbar value="card-list"></custom-tabbar>
		</view>
    <view v-else>
      <custom-header title="报价" :isHaveBack="false"></custom-header>
      <scroll-view scroll-x class="card-scroll-container" show-scrollbar="false">
        <view v-for="(item, index) in typeList" :key="index"
              :class="['type-item', selectedIndexs === index ? 'active' : '']" @click="switchCardTypes(index)">
          {{ item.name }}
        </view>
      </scroll-view>
      <block v-for="(item, index) in cardList" :key="index">
        <view style="display: flex; justify-content: space-between; padding: 20rpx 40rpx;" @click="toCardList(item)">
          <view style="display: flex; align-items: center;">
            <image style="width: 120rpx; height: 120rpx;" :src="item.mimg" mode="aspectFit"></image>
            <view style="color: black; font-size: 28rpx; margin-left: 20rpx;">{{ item.name }}</view>
          </view>

          <view style="display: flex; align-items: center;">
            <text style="font-size: 22rpx;">报价</text>
            <image src="../../static/images/arrow_right.png"
                   style="width: 15rpx; height: 27rpx; margin-left: 10rpx;"></image>
          </view>
        </view>
        <view style="height: 2rpx; width: 100%; background-color: rgba(0, 0, 0, 0.09);"></view>
      </block>
      <custom-tabbar value="card-list"></custom-tabbar>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedIndex: 0,
				tabs: [],
				currentList: [],
				imgHost: '',
				popupVisible: false,
				selectedId: null,
				isShow: uni.getStorageSync("isShow"),
        typeList: [], //类型列表（审核data）
        cardList: [], //卡片列表
        selectedIndexs: 0, //类型下标
        typeId: null, //当前类型
			};
		},
		onLoad(options) {
			this.imgHost = this.$app.imgApiHost;
			if (options) {
				console.log(options.id);
				this.selectedId = parseInt(options.id)
			}
			this.getTypeList();

      if (!this.isShow){
        this.getTypeLists();
      }
		},
		methods: {
			selectTab(index) {
				this.selectedIndex = index;
				this.selectedId = this.tabs[this.selectedIndex].id
				console.log("当前选中id" + this.selectedId);
				this.getCardList();
			},
			handleSearchClick() {
				console.log('搜索按钮被点击');
				// 在这里添加搜索功能的逻辑
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			handleServiceClick() {
				console.log('客服按钮被点击');
				// 在这里添加客服功能的逻辑
			},
			async getTypeList() {
				try {
					const res = await this.$http({
						method: 'GET',
						url: '/product/type/list',
					});
					this.tabs = res.data.filter(item => item.name !== '热门回收');

					//dom已更新后操作数据
					this.$nextTick(() => {
						if (this.selectedId) {
							// 查找匹配的索引
							const targetIndex = this.tabs.findIndex(
								tab => tab.id === this.selectedId
							)
							if (targetIndex > -1) {
								this.selectedIndex = targetIndex
							}

							console.log("当前选中id" + this.selectedId);
						} else {
							//默认选中第一个
							this.selectedId = this.tabs[0].id;
						}
						this.getCardList();
					})
				} catch (error) {
					//TODO handle the exception
					console.log(error);
				}
			},
			async getCardList() {
				const res = await this.$http({
					method: 'GET',
					url: '/product/product/list',
					data: {
						prodTypeId: this.tabs[this.selectedIndex].id
					}
				});
				console.log(res.data)
				this.currentList = res.data
			},
			showPopup() {
				this.$refs.popup.open();
			},
			closePopup() {
				this.$refs.popup.close();
			},
			toSaleCard(cardId) {
				uni.navigateTo({
					url: `/pages/sale-card/sale-card?typeId=${this.selectedId}&cardId=${cardId}`
				})
			},
      //审核方法
      async getTypeLists() {
        const res = await this.$http({
          method: 'GET',
          url: '/product/type/list',
        });

        if (res) {
          this.typeList = res.data.filter(item => item.name !== '热门回收');

          this.$nextTick(() => {
            this.typeId = this.typeList[0].id;
            this.getCardLists();
          })
        }
      },
      switchCardTypes(index) {
        if (index == this.selectedIndex) return;
        this.selectedIndex = index;
        this.typeId = this.typeList[this.selectedIndex].id;

        this.getCardLists();
      },
      async getCardLists() {
        const res = await this.$http({
          method: 'GET',
          url: '/product/product/list',
          data: {
            prodTypeId: this.typeId
          }
        });

        if (res) {
          this.cardList = res.data;
        }
      },
      toCardList(item) {
        uni.setStorageSync('selectedItem', JSON.stringify(item));
        uni.navigateTo({
          url: '/pages/shop-detail/shop-detail'
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		height: calc(100vh - 330rpx);
	}

	.sidebar {
		width: 180rpx;
		flex-shrink: 0;
		border-right: #ECECEC solid 2rpx;

		.tab-item {
			text-align: center;
			padding: 30rpx 0;
			cursor: pointer;
			position: relative;
			color: #171717;
			font-size: 28rpx;
		}

		.selected-tab::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 6rpx;
			height: 42rpx;
			background-color: #4D7EF4;
			margin: auto;
		}

		.selected-tab {
			color: #4D7EF4;
		}
	}

	.content {
		flex: 1;

		.list {
			display: flex;
			flex-wrap: wrap;
			padding: 66rpx 0rpx;
			padding-left: 44rpx;
			padding-right: 24rpx;
			justify-content: flex-start;

			.list-item {
				width: calc((100% - 80rpx)/3);
				margin-right: 20rpx;
				text-align: center;
				font-size: 23.08rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 20rpx;

				.item-image {
					width: 112rpx;
					height: 112rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}

  //审核
  .card-scroll-container {
    margin-left: 20rpx;
    white-space: nowrap;
    margin-bottom: 20rpx;
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);

    .type-item {
      display: inline-block;
      padding: 20rpx 5rpx;
      margin-right: 45rpx;
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.45);
      cursor: pointer;
      border-bottom: 4rpx solid transparent;
      border-radius: 2px;

      &.active {
        color: #4D7EF4;
        font-weight: 700;
        border-bottom-color: #4D7EF4;
      }
    }
  }
</style>